<template>
  <div class="main">
   
    <div class="home">
      <div class="home-bg"></div>
      <div class="home-1 animated bounceIn">&nbsp;</div>
      <div class="home-2 animated bounceInDown delay-1">&nbsp;</div>
      <div class="home-3 animated bounceInDown delay-2">&nbsp;</div>
      <div class="home-4">&nbsp;</div>
      <router-link class="home-btn1 animated fadeInUp delay-3" to="/scqj"></router-link>
      <router-link class="home-btn2 animated fadeInUp delay-3" to="/ppjs"></router-link>
      <router-link class="home-btn3 animated fadeInUp delay-3" to="/cpqd"></router-link>
      <router-link class="home-btn4 animated fadeInUp delay-3" to="/xmys"></router-link>
      <router-link class="home-btn5 animated fadeInUp delay-3" to="/tzyl"></router-link>
      <router-link class="home-btn6 animated fadeInUp delay-3" to="/fwbz"></router-link>
    </div>
  </div>
</template>

<script>
import {mapActions} from 'vuex'
import { playMusicAfterVideo } from '../assets/utils.js'
export default {
  name: 'home',
  data () {
    return {
      
    }
  },
  mounted: function() {
       playMusicAfterVideo(this)
  },
  methods:{
    ...mapActions({
      musicActionShow: 'musicActionShow',
      musicActionPlay: 'musicActionPlay'
      }),

  },
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main{width:100%;height:100%;position: relative;height:37.5rem;}
.home-bg{width:100%;height:37.5rem;position:absolute;top:0;left:0;background:url(../assets/images/home-bg.jpg) no-repeat;background-size:cover;overflow: hidden;}
.home-1{
  position: absolute;
  top: 1.95rem;
  left:1.45rem ;
  width:15.05rem ;
  height:23.05rem ;
  background: url(../assets/images/home-1.png) no-repeat;
  background-size: 100% 100%;
}
.home-2{
  position: absolute;
  top:.825rem;
  left:2.6rem;
  width:12.925rem ;
  height:7.925rem ;
  background: url(../assets/images/home-2.png) no-repeat;
  background-size: 100% 100%;
}
.home-3{
  position: absolute;
  bottom:4.975rem;
  left:3.55rem;
  width:9.925rem ;
  height:14.825rem ;
  background: url(../assets/images/home-3.png) no-repeat;
  background-size: 100% 100%;
}
.home-4{
  position: absolute;
  bottom:0;
  left:0;
  width:100% ;
  height:4.975rem;
  background: url(../assets/images/home-4.png) no-repeat;
  background-size: 100% 100%;
}
.home-btn1{
  position: absolute;
  left:3.225rem;
  top:8.85rem;
  width:5.425rem ;
  height:2.025rem;
  background: url(../assets/images/home-btn1.png) no-repeat;
  background-size: 100% 100%;
}
.home-btn2{
  position: absolute;
  left:9.4rem;
  top:8.75rem;
  width:5.575rem ;
  height:2.125rem;
  background: url(../assets/images/home-btn2.png) no-repeat;
  background-size: 100% 100%;
}
.home-btn3{
  position: absolute;
  left:3.225rem;
  top:12rem;
  width:5.425rem ;
  height:2.15rem;
  background: url(../assets/images/home-btn3.png) no-repeat;
  background-size: 100% 100%;
}
.home-btn4{
  position: absolute;
  left:9.4rem;
  top:12rem;
  width:5.575rem ;
  height:2.15rem;
  background: url(../assets/images/home-btn4.png) no-repeat;
  background-size: 100% 100%;
}
.home-btn5{
  position: absolute;
  left:3.225rem;
  top:15.45rem;
  width:5.4rem ;
  height:2.025rem;
  background: url(../assets/images/home-btn5.png) no-repeat;
  background-size: 100% 100%;
}
.home-btn6{
  position: absolute;
  left:9.4rem;
  top:15.275rem;
  width:5.575rem ;
  height:2.275rem;
  background: url(../assets/images/home-btn6.png) no-repeat;
  background-size: 100% 100%;
}






</style>
